<template>
  <div>
    <!-- 表格顶部标题 -->
    <div class='title' v-if='title'>{{ title }}</div>

    <div class='table-toolbar'>
      <!-- 顶部左侧 -->
      <div class='table-toolbar-left'>
        <slot name='tableTitle'></slot>
      </div>

      <!-- 顶部右侧 -->
      <div class='table-toolbar-right'>
        <slot name='toolbar'></slot>
      </div>
    </div>
  </div>

  <!-- 表格主体 -->
  <n-data-table
    v-bind='getBindValue'
    ref='basicTableRef'
  >
  </n-data-table>
  
</template>

<script lang="ts" setup>
  import { computed, ref, unref, onMounted } from 'vue'
  import { basicProps } from './props'

  const props = defineProps({...basicProps})

  const getProps = computed(() => {
    return { ...props }
  })

  const getBindValue = computed(() => {
    return {
      ...unref(getProps)
    }
  })

  onMounted(()=> {
  })

</script>

<style lang='stylus' scoped>

  .title
    font-size 24px
    padding: 10px 0

  .table-toolbar
    margin-bottom 10px

</style>